<template lang="html">
  <div class="indexHome">
    <index-header></index-header>
    <main-first :list="Leftlist"></main-first>
    <main-two :list="bookDetaiList"></main-two>
    <index-footer></index-footer>
  </div>
</template>

<script>
import indexHeader from 'components/indexHeader'
import mainFirst from './component/mainFirst'
import mainTwo from './component/mainTwo'
import indexFooter from 'components/footer/footer'
import axios from 'axios'
export default {
  name:'index',
  components:{
    indexHeader,
    mainFirst,
    mainTwo,
    indexFooter
  },
  data () {
    return {
      Leftlist: [],
      bookDetaiList: []
    }
  },
  methods:{
    getIndexInfo(){
      axios.get('/api/publish.json')
        .then(this.getIndexInfoSucc)
    },
    getIndexInfoSucc( res ){
      res = res.data
      console.log(res.data)
      if( res.data && res.data ){
        this.Leftlist = res.data.letterPublish
        this.bookDetaiList = res.data.bookDetail
      }
    }
  },
  mounted () {
    this.getIndexInfo()
  }
}
</script>

<style lang="scss">

</style>
